<template>
    <div class="base-input">
        <el-input
            v-model.trim="inputValue"
            :type="type"
            :class="{
                long: config.long,
                moreLanguage: config['LanguageTableStyle'] && moreLanguage
            }"
            :disabled="disabled"
            :size="config.inputSize"
            :show-password="config.showPassword"
            :maxlength="config.maxlength"
            :minlength="config.minlength"
            :min="config.min"
            :placeholder="$t(config.placeholder, { msg: '' })"
            :clearable="config.clearable"
            :prefix-icon="config.prefixIcon"
            :suffix-icon="config.suffixIcon"
            show-word-limit
            @change="change"
            @input="input"
            @blur="blur"
            @mousewheel.native.prevent
            @keydown.native.enter="enter"
        >
            <!-- <el-button
        v-if="moreLanguage"
        slot="append"
        style="display: block;"
        icon="iconfont rbp-input_language"
        @click="showlg" /> -->
            <lang-input
                v-if="moreLanguage"
                ref="moreLanguage"
                slot="append"
                :disabled="disabled"
                :value="inputValue"
                :contentKeys="contentKeys"
                :formData="formData"
            />
            <el-select
                v-if="config.selectOptions && config.selectOptions.length > 0"
                slot="prepend"
                v-model="selectValue"
                class="input-select"
                :placeholder="$t(config.placeholder, { msg: '' })"
                @change="selectChange"
            >
                <el-option v-for="(item, index) in config.selectOptions" :key="index" :label="$t(item.lang) || item.label" :value="item.value" />
            </el-select>
            <template v-if="config['suffixText']" slot="append">
                <span>{{ config['suffixText'] }}</span>
            </template>
            <template v-if="config['prefixText']" slot="prepend">
                <span>{{ config['prefixText'] }}</span>
            </template>
        </el-input>
    </div>
</template>

<script lang="ts">
import Vue from 'vue';
import Component from 'vue-class-component';
import { Prop, Watch } from 'vue-property-decorator';
import { Partial, InputConfig, Dictionary } from '@/typings';
import { Tools } from '@/utils/tools';
const DEFAULT_CONFIG: InputConfig = {
    inputSize: 'small',
    showPassword: false,
    long: false,
    // placeholder: 'form.placeholder.input',
    placeholder: '',
    prefixIcon: '',
    suffixIcon: '',
    minlength: 0,
    clearable: true
};
@Component({
    name: 'base-input',
    components: {
        langInput: () => import('@/components/lang-input/index.vue')
    }
})

/**
 * @param type = 表单类型
 * @param value = 传入值
 * @param long = 使用长表单
 * @param disabled = 是否禁用
 * @param inputProps = 基础属性
 * @param icon = 多语言图标
 * @param moreLanguage = 是否多语言
 * @param Languages = 多语言列表
 * @method change = 值改变时触发
 * */
export default class baseSelect extends Vue {
    @Prop() inputProps: Partial<InputConfig>;
    @Prop({ default: 'text' }) type: string;
    @Prop({ default: false }) disabled: boolean;
    @Prop() value: string;
    @Prop() contentKeys: string;
    @Prop() formData: any;
    @Watch('inputProps', { immediate: true, deep: true })
    onInputPropsChanged(val: Dictionary<any>) {
        // 这里要优化
        if (val && Object.keys(val).includes('selectDefault')) {
            this.selectValue = val.selectDefault;
        }
        // 这里要优化
        if (val && Object.keys(val).includes('moreLanguage')) {
            this.moreLanguage = val.moreLanguage;
        }
        this.config = Object.assign({}, DEFAULT_CONFIG, val);
    }
    @Watch('value', { immediate: true })
    onValueChange(current) {
        this.inputValue = current;
    }
    showMoreLanguage: boolean = false; // 默认不打开多语言框

    config: InputConfig = DEFAULT_CONFIG;
    inputValue: string = '';
    selectValue: any = '';
    moreLanguage: boolean = false;

    numberType(value) {
        if (typeof this.config.min === 'number' && value < this.config.min) {
            this.$message({
                message: `不能小于${this.config.min}`,
                type: 'warning'
            });
            return this.config.min;
        }
        // 如果有设置精确小数点后几位
        return this.type === 'number'
            ? this.config.decimalPlaces
                ? Number(Number(value).toFixed(this.config.decimalPlaces))
                : Number(value)
            : Tools.trim(value);
    }
    // other
    change(currentValue) {
        this.$emit('update:value', this.numberType(currentValue));
        this.$emit('change', this.numberType(currentValue));
    }
    selectChange(currentValue) {
        this.$emit('inputSelectChange', currentValue);
    }
    enter() {
        this.$emit('update:value', this.numberType(this.inputValue));
        this.$emit('enter', this.numberType(this.inputValue));
    }
    input(currentValue) {
        this.$emit('update:value', this.numberType(currentValue));
        const f = this._debounce(() => {
            this.$emit('input', this.inputValue);
        }, 500);
        f();
    }
    // 用来处理多语言[失去焦点触发[没有键入的值用当前系统语言所对应的值赋予]]
    blur() {
        // this.moreLanguage && this.saveLanguages()
        this.inputValue = this.numberType(this.inputValue);
        this.$emit('blur', this.inputValue);
    }
}
</script>

<style lang="scss" scoped>
.base-input {
    .el-textarea {
        width: 320px;
        /deep/.el-textarea__inner {
            height: 80px;
        }
    }
    /deep/.iconfont {
        font-size: 12px;
        display: inline-block;
        // border-left: 1px solid #d7d7d7;
    }
    ::-webkit-scrollbar {
        width: 4px;
    }
    ::-webkit-scrollbar-track {
        background-color: #fff;
    }
    ::-webkit-scrollbar-thumb {
        background-color: rgba(166, 167, 173, 1);
        border-radius: 3px;
    }
    /deep/input::-webkit-outer-spin-button,
    /deep/input::-webkit-inner-spin-button {
        -webkit-appearance: none;
    }
    /deep/input[type='number'] {
        -moz-appearance: textfield;
    }
    .long {
        min-width: 320px;
    }
}
</style>
<style lang="scss">
.moreLanguage {
    .el-input-group__append {
        border: none !important;
        background: #f5f9ff !important;
    }
}
.input-select {
    min-width: 126px;
    input {
        color: #282828 !important;
        padding-left: 20px !important;
    }
}
.LanguageDialog {
    .el-dialog__body {
        padding: 10px 20px;
        font-size: 12px;
        .el-form-item {
            display: flex !important;
            flex-direction: column !important;
            margin-bottom: 10px;
            label {
                text-align: left;
                font-weight: bold;
                font-size: 14px;
                line-height: 20px;
            }
        }
    }
    .el-dialog__footer {
        padding: 10px !important;
    }
}
</style>
